<template>
  <a-card title="车辆通行统计">
    <a-range-picker
      :showTime="true"
      format="YYYY-MM-DD HH:mm:ss"
      @change="change"
      :default-value="[moment(currentDate, dateFormat), moment(currentDate1, dateFormat)]"
    />
    <div class="container">
      <div v-if="showCharts" id="main" :style="myChartStyle2" ></div>
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </div>
    <div class="div-center-text">
      其中包含: <a-divider type="vertical" />
      <span  v-for="item in data" :key="item">
          {{ item.name }}:{{ item.value }}
          <a-divider type="vertical" />
        </span>
    </div>
    <a-timeline mode="alternate" style="margin-top:30px">
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询开始时间 :
        {{ this.start }}</a-timeline-item
      >
      <!-- <a-timeline-item>
           其中包含: <a-divider type="vertical" />
         <span v-for="item in data" :key="item">
           {{ item.name }}:{{ item.value }}
           <a-divider type="vertical" />
         </span>
       </a-timeline-item>
 -->
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询结束时间 :
        {{ this.end }}</a-timeline-item
      >
    </a-timeline>

  </a-card>

</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import moment from 'moment'
  import * as echarts from "echarts";
  export default {
    name: 'CarinfoCount',
    mixins: [],
    components: {},
    data() {
      this.dateFormat = 'YYYY-MM-DD HH:mm:ss'
      this.currentDate = moment().subtract(3,'month').format('YYYY-MM-DD HH:mm:ss')
      this.currentDate1 = moment().format('YYYY-MM-DD HH:mm:ss')
      return {
        showCharts: false,
        data: [],
        total: [],
        start: '',
        end: '',
        xData: [], //横坐标
        yData: [], //数据
        myChartStyle: { float: "left", width: "50%", height: "400px" },
        myChartStyle2: { float: "right", width: "50%", height: "400px" }
      }
    },
    mounted() {
      this.getRecordCout(this.currentDate, this.currentDate1)
    },
    computed: {},
    methods: {
      moment,
      change(date, dateStr) {
        this.getRecordCout(dateStr[0], dateStr[1])
      },
      getRecordCout(start, end) {
        this.showCharts = false
         this.start = start
        this.end = end
       /* this.start = start + ' 00:00:00'
        this.end = end + ' 23:59:59'*/
        getAction('/carinfo/carRecord/getCountList/'+0, { start: this.start, end: this.end }).then((res) => {
          if (res.success) {
            this.showCharts = true
            this.$nextTick(() => {
              this.data = res.result.data
              this.total = res.result.count
              this.xData=[];
              this.yData=[];
              for(var i=0;i<this.data.length;i++){
                this.xData.push(this.data[i].name)
                this.yData.push(this.data[i].value)
              }
              //this.xData = res.result.data.name
              //this.yData = res.result.data.value
              console.log(this.xData)
              this.getCharts()
              this.initEcharts()
            })
          }
        })
      },

      // 使用柱形图，关于其他配置可以去官网查看
      getCharts() {
        const chartBox = this.$echarts.init(document.getElementById('main'))
        const option = {
          title: { subtext: '总数:' + this.total },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: '来车量',
              type: 'pie',
              center: ['50%', '50%'],

              itemStyle: {
                borderRadius: 8,
              },
              data: this.data,
              label: {
                show: true,

                formatter: '{b}:{c}' + '\r' + '({d}%)',
              },
            },
          ],
        }
        chartBox.setOption(option)
        // 根据页面大小自动响应图表大小
        window.addEventListener('resize', function () {
          chartBox.resize()
        })
      },
      initEcharts() {

        // 基本柱状图
        const option = {
          xAxis: {
            data: this.xData,
            axisLabel: {
              interval: 0,
              rotate: 30
            }
          },
          yAxis: {},
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              //dataView: { show: true, readOnly: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              type: "bar", //形状为柱状图
              data: this.yData
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .div-center-text {
    text-align: center;
  }


  .container {
    display: flex;
  }


</style>

